<template>
	<div>
		<van-overlay :show="shareShow" @click="shareShow = false;flagImg=true">
			<div class="myselfShare">
				<div class="saveImage2" v-show="!flagImg"><img  :src="ip" alt="" /></div>
				<div class="saveImage" ref="saveImage" v-show="flagImg">
					<div class="header">
						<div class="headerImage"><img style="width: 100%;height: 100%;" :src="shareInfo.avatar || imgDafult" alt="" /></div>
						<div class="headerInfo">
							<div class="name">{{ shareInfo.employeeName }}</div>
							<div class="time">{{ shareInfo.date }}分享</div>
						</div>
					</div>
					<div class="storeInfo">
						<div class="name">{{ shareInfo.name }}</div>
						<div class="detailInfo mt">
							<div class="icon"><img src="../../assets/phone.png" width="100%" /></div>
							<div class="gary">{{ shareInfo.phone }}</div>
						</div>
						<div class="detailInfo">
							<div class="icon"><img src="../../assets/address.png" width="100%" /></div>
							<div class="gary">{{ shareInfo.address }}</div>
						</div>
					</div>
		
					<div class="bigImage"><img :src="publicityImg" width="100%" /></div>
		
					<div class="footer">
						<div class="info">
							<div>惊喜不断，倾情奉献</div>
							<div>扫码参与</div>
						</div>
						<div class="codeImage"><img style="width: 100%;height: 100%;" :src="codeImage" alt="" /></div>
					</div>
				</div>
				<div class="saveBtn">长按保存图片</div>
			</div>
		</van-overlay>
	</div>
</template>

<script>
	import html2canvas from 'html2canvas';
	export default{
		props:{
			// imgDafult:{
			// 	type:String,
			// 	default:'',
			// },
			// codeImage:{
			// 	type:String,
			// 	default:null,
			// },
			// publicityImg:{
			// 	type:String,
			// 	default:'',
			// },
			// flagImg:{
			// 	type:Boolean,
			// 	default:false,
			// },
			// shareInfo:{
			// 	type:Object,
			// 	default:'',
			// },
			// shareShow:{
			// 	type:Boolean,
			// 	default:false,
			// },
			// ip:{
			// 	type:String,
			// 	default:null
			// },
		},
		data(){
			return{
				flagShow:0,
				flagImg:true,
				ip: null,
				imgDafult: require('@/assets/avatar.png'),
				listImg: [require('../../assets/1.png'), require('../../assets/2.png'), require('../../assets/3.png')],
				publicityImg: null, //背景
				codeImage: null,
				active: 0, //tabs激活下标
				list: [], //优惠券列表
				rightShow: false, //右侧分享与置顶状态
				merchantCode: 31000001, //商家编码
				reciveDiscountID: '', //保存当前领取的优惠券ID，领取优惠券函数reciveDiscount()用到
				searchInput: '', //顶部搜索输入框的值,
				shareShow: false,
				shareInfo: '' //分享弹窗数据
			}
		},
		methods: {
			rightShare() {
				let params = {
					merchantCode: localStorage.getItem('merchantCode'),
					employeeId: localStorage.getItem('employeeId') //操作人id
				};
				if(this.flagShow==0){
				this.$api.share(params).then(res => {
					if ((res.code = '10000')) {
						// var string = res.replace("/\\","")
						this.shareInfo = res.data;
					}
				});
					this.getCode();
				}
					this.publicityImg = this.listImg[Math.floor(Math.random() * this.listImg.length)];
				this.shareShow = true;
				this.$nextTick()
				setTimeout(() => {
					this.draw()
				}, 1000);
			},
			draw(){
				html2canvas((this.$refs.saveImage),{
				    useCORS: true,
				    allowTaint: true, //允许污染
						backgroundColor: null,
						scale:window.devicePixelRatio,
				  }).then(canvas => {
						this.ip = canvas.toDataURL("image/png");
						this.flagImg=false
						this.$nextTick();
				})
			},
			getCode() {
				this.$http
					.post(
						'https://autodt-gateway.yunchefu.cn/message/wechat/miniAppQrCode',
						{ appId: 'wx7451a1aa96196cd1', path: '/pages/redirect/index?from=merchantCouponList&merchantCode=' + localStorage.getItem('merchantCode') },
						{
							headers: {},
							responseType: 'blob'
						}
					)
					.then(res => {
						this.codeImage = URL.createObjectURL(res);
						this.flagShow=1
					});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.myselfShare {
		display: flex;
		flex-direction: column;
		align-items: center;
		.saveImage2 img{
			width: 664px;
			height: 896px;
			border-radius: 20px;
			// margin-top: -150px;
		}
		.saveImage {
			// margin-top: -150px;
			width: 620px;
			height: 852px;
			// background: #fff;
			border-radius: 20px;
			background-image: url(../../assets/share.png);
			background-size: 100% 100%;
			padding: 20px;
			.header {
				display: flex;
				// background: #ef3b4f;
				.headerImage {
					height: 90px;
					width: 90px;
					border-radius: 5px;
				}
				.headerInfo {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					color: white;
					.name {
						padding-left: 20px;
						font-size: 28px;
					}
					.time {
						padding-left: 20px;
						font-size: 24px;
					}
				}
			}
			.storeInfo {
				// display: flex;
				// flex-direction: column;
				// height: 140px;
				// justify-content: space-between;
				// padding: 20px 0;
				// margin-top: 50px;
				margin-top: 70px;
				.name {
					font-size: 32px;
					color: #272727;
				}
				.mt {
					margin-top: 19px;
				}
				.detailInfo {
					margin-bottom: 19px;
					display: flex;
					align-items: center;
					.icon {
						// height: 25px;
						width: 30px;
					}
					.gary {
						color: gray;
						padding-left: 10px;
						font-size: 26px;
					}
				}
			}
			.bigImage {
				width: 100%;
				height: 300px;
				overflow: hidden;
			}
			.footer {
				margin-top: 20px;
				display: flex;
				justify-content: flex-end;
				.info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-end;
					> div {
						font-size: 28px;
						color: #272727;
					}
				}
				.codeImage {
					height: 180px;
					width: 180px;
					// background: black;
					margin-left: 20px;
				}
			}
		}
		.saveBtn {
			// position: absolute;
			width: 400px;
			height: 90px;
			border-radius: 100px;
			background: #ef3b4f;
			color: white;
			text-align: center;
			line-height: 90px;
			font-size: 28px;
			margin-top: 30px;
		}
	}
</style>
